// 这里是所有和商品类表筛选相关的逻辑

import { ref, onMounted } from 'vue'
import { useRoute } from 'vue-router'
import { findSubCategoryGoods } from '@/api/category'
export function useLoadListData () {
  // 切换筛选条件功能
  // 利用数据驱动视图理念  给每一项数据都添加一个用来控制它是否是激活状态的响应式字段
  // 然后点击的时候利用排它思想 先把自己的兄弟都从true变成false 然后把自己从false变成true
  function toggleSelect (list, self, group) {
    // 排它思想
    // 先把自己所有的兄弟 包括自己的selected字段都变成false
    list.forEach((item) => {
      item.selected = false
    })
    // 把自己的selected字段变成true
    self.selected = true
    console.log(list, self, group)
    // list: 当前点击项所属的类别列表  self:当前点击项
    // reqParams.attrs中 添加
    // 思路：当已经添加过同类的情况下 以新添加的为主
    // 代码实现: 如果group中的name字段能够在 reqParams.attrs中找到（findIndex） 代表当前是重复的
    // 先把之前的干掉 （splice）  然后再push
    const index = reqParams.attrs.findIndex((item) => item.groupName === group.name)
    if (index !== -1) {
      reqParams.attrs.splice(index, 1)
    }
    reqParams.attrs.push({
      groupName: group.name,
      propertyName: self.name
    })
    console.log(reqParams.attrs)
    // 重新拉取数据
    loadList()
  }

  // 排序功能实现
  // 声明一个list 包括所有的可选的排序字段
  const sortTypeList = [
    { name: '默认排序', type: null },
    { name: '最新商品', type: 'publishTime' },
    { name: '最高人气', type: 'orderNum' },
    { name: '最多评论', type: 'evaluateNum' }
  ]
  const curSortType = ref(null)
  function toggleSort (sortType) {
    console.log(sortType)
    curSortType.value = sortType
    // 修改一下查询字段
    reqParams.sortField = sortType
    // 重新发送添加好字段之后的网络请求
    loadList()
  }

  // 带有多个条件的列表筛选功能(先实现核心需求 在实现额外需求)
  // 1. 不加任何的其它额外筛选条件  先把最基础{page:1,pageSize:20}的列表拉取回来 (接口是通的  模板渲染完毕)
  // 2. 在第一步没有问题的基础上  加额外的筛选字段 {page:1,pageSize:20,sortType:'pulishTime'} 只需要把点击项的值交给这个字段 然后重新调用一下获取商品列表的接口
  const route = useRoute()
  const reqParams = {
    page: 1, // 页数
    pageSize: 20, // 条数
    categoryId: route.params.id, // 分类id
    sortField: null, // 排序类别
    attrs: [] // 商品属性
  }

  // 规格的筛选条件要求: 同类就进行覆盖只保留最后的一项 不同类不覆盖
  const goodList = ref([])
  const isFinished = ref(false)
  const isLoading = ref(false)
  async function loadList () {
    const res = await findSubCategoryGoods(reqParams)
    goodList.value = res.result.items
  }

  // 加载下一页逻辑
  async function loadNext () {
    console.log('执行加载下一页的逻辑')
    // 更改一下请求状态
    isLoading.value = true
    // 1. 修改一下reqParams.page自增
    reqParams.page++
    // 2. 调用接口获取下一页的数据
    const res = await findSubCategoryGoods(reqParams) // 这个地方代表请求中
    // 3. 判断当前items是否为空 如果为空立刻停止监听(特殊)
    if (res.result.items.length === 0) {
      isFinished.value = true
    }
    // 4. 把新数据和老数据做一个拼接处理
    goodList.value = [...goodList.value, ...res.result.items]
    isLoading.value = false
  }
  onMounted(() => {
    loadList()
  })
  return {
    toggleSelect,
    toggleSort,
    sortTypeList,
    goodList,
    curSortType,
    loadNext,
    isFinished,
    isLoading
  }
}
